<template>
  <div class="home">
      <el-container>
  <el-header>
    <el-menu  class="el-menu-demo" mode="horizontal" router>
  <el-menu-item index="/">首页</el-menu-item>
  <el-menu-item index="/shop">商品</el-menu-item>
  <el-menu-item index="/dingdan">订单</el-menu-item>
  <el-menu-item index="/hy">会员</el-menu-item>
  <el-menu-item>设置</el-menu-item>
      <el-submenu index="2-4">
      <template slot="title">登录</template>
      <el-menu-item @click="out">退出登录</el-menu-item>
    </el-submenu>
</el-menu>
<div class="line"></div>
  </el-header>
  <el-container>
    <el-aside width="200px">
      <el-col :span="12">
    <el-menu
      default-active="2"
      class="left"
      router
      >
      <el-menu-item index="/">
        <i class="el-icon-menu"></i>
        <span slot="title">后台首页</span>
      </el-menu-item>
            <el-menu-item index="/xc">
        <i class="el-icon-menu"></i>
        <span slot="title">相册管理</span>
      </el-menu-item>
      <el-menu-item index="/shop">
        <i class="el-icon-setting"></i>
        <span slot="title">商品列表</span>
      </el-menu-item>
    </el-menu>
  </el-col>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
  </div>
</template>

<script>


export default {
  name: 'Home',
  methods:{
    out(){
      localStorage.removeItem('token')
      this.$router.push('/login')
    },
  }
}
</script>
<style lang="scss" scoped>
.el-header{
  margin: -1px 20px;
  width: 100%;
  border-bottom: 1px solid #ccc;
  .el-menu.el-menu--horizontal{

  border-bottom: 1px solid #ccc;

  }
  ul{
    float: right;
    
  }
}
.left{
  width: 120px;
}
</style>
